<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SmartJS Test</title>  
<script charset="utf-8" type="text/javascript" src="/smart.js"></script>
<style type="text/css">
.slide1{width:300px; height:200px; background:#ccc; overflow:hidden;}
.slide1 ul{display:block; height:200px; width:900px; margin:0; padding:0;}
.slide1 li{list-style:none; display:block; width:300px; height:200px; float:left;}

.slide2{margin-top:35px; width:300px; height:200px; background:#ccc; overflow:hidden;}
.slide2 ul{display:block; height:600px; width:300px; margin:0; padding:0;}
.slide2 li{list-style:none; display:block; width:300px; height:200px; float:left;}
</style>
</head>

<body>
<div class="abc ddd">111</div>
<div class="eee">333</div>
<div>
  <ul>
    <li data-action="a.print" data-user="张三"><a href="#">张三</a></li>
    <li data-action="a.print" data-user="李四">李四</li>
    <li data-action="a.print" data-user="王五">王五</li>
  </ul>
</div>

<div class="wrap">
    <div class="slide1">
      <ul data-style="marginLeft" data-dir="0" data-size="300" data-page="3" data-shift="0.5">
        <li style="background:red;"></li>
        <li style="background:blue;"></li>
        <li style="background:green;"></li>
      </ul>
    </div>
    <div class="slide2">
      <ul data-style="marginTop" data-dir="1" data-size="200" data-page="3">
        <li style="background:red;"></li>
        <li style="background:blue;"></li>
        <li style="background:green;"></li>
      </ul>
    </div>
</div>

<script type="text/javascript">
var a = {
  print:function(e){
      alert(this.getAttribute("data-user"))
  }
}
Smart().use("event", "http", "animation", "touchslide", function(S){
    S.Event.action("body", "click");
    //alert(S.Node.css(".wrap .slide1", "width"))
    //---------------------------------------------
    var http = S.Http.newInstance("test");
    
    http.set("success", function(data, main){
      alert(data + "\n" + main)
    });
    
    http.set("header", function(status, xhr, main){
        alert(status + "\n" + xhr.getResponseHeader("Content-Type"));
    });
  
    var url = "data.txt";
    //http.loadPage(url, "POST", "input=test", "test", false);
    
    //------------------------------------------
    var slide1 = S.TouchSlide.newInstance("test1");
    slide1.set("start", function(e, instance){
      console.info("start:" + instance.currentPoint + ";" + instance.fingerStartX + ";" + instance.fingerStartY);
    });
    slide1.set("move", function(e, instance, offset){
      console.info("move:" + offset);
    });
    slide1.set("end", function(e, instance, offset){
      console.info("end:" + offset);
    });
    slide1.bind(".slide1 ul");
    
    var slide2 = S.TouchSlide.newInstance("test2");
    slide2.set("start", function(e, instance){
      console.info("start:" + instance.currentPoint + ";" + instance.fingerStartX + ";" + instance.fingerStartY);
    });
    slide2.set("move", function(e, instance, offset){
      console.info("move:" + offset);
    });
    slide2.set("end", function(e, instance, offset){
      console.info("end:" + offset);
    });
    slide2.bind(".slide2 ul");
});
</script>
<div id="tips">
hello world!
</div>
</body>
</html>